<template>
  <view class="verify">
    <view class="verify-header">
      <view class="header-code">
        <view class="code-title">预约码</view>
        <view class="code-status" :class="info.writeOffStatus?'code-use':''">{{info.writeOffStatus?'已使用':'待使用'}}</view>
      </view>
      <h2>{{info.appointmentCode}}</h2>
      <view class="com-list">
        <view class="list-name">手机号码：</view>
        {{info.mobile}}
      </view>
      <view class="com-list">
        <view class="list-name">手机类型：</view>
        {{info.phoneType}}
      </view>
      <view class="com-list">
        <view class="list-name">营业厅：</view>
        <view style="text-align: right;">{{info.name}} <br> {{info.address}}</view>
      </view>
      <view class="com-list">
        <view class="list-name">预约时间：</view>
        <strong>{{info.appointmentTime}} <span v-if="info.isOverTime">{{info.isOverTime?'已超时':''}}</span></strong>
      </view>
    </view>
    <button class="verify-button" :class="info.writeOffStatus?'disabled':''" @click="handleOpen">{{info.writeOffStatus?'已核销':'马上核销'}}</button>
    
    <uni-popup ref="verify" type="center">
      <view class="verify-popup">
        <image class="popup-close" @click="$refs.verify.close()" src="@/static/images/close.png" mode="widthFix"></image>
        <view class="verify-main">
          <span>{{info.name}}</span>
          <h2>请在此确认手机号码</h2>
          <h1>{{info.mobile}}</h1>
          <button class="main-button" @click="handleSubmit">确认核销</button>
        </view>
      </view>
    </uni-popup>
    
    <uni-popup ref="warring" type="center" :mask-click="false">
      <view class="warring-popup">
        <view class="warring-main">
          <h2>温馨提醒</h2>
          <h3>您未预约,请先预约</h3>
          <image class="main-img" src="@/static/images/info.png" mode="widthFix"></image>
          <button class="main-button" @click="handleToFilm">去预约</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
  import {getQueryString} from '@/utils/Tools.js'
  import {throttle} from '@/utils/Tools.js'
  import point from '@/network/point.js'
  const Vconsole = require('@/utils/vconsole.min.js')
  export default {
    data() {
      return {
        appointmentCode:'',
        desmobile:'',
        info:{},
        timer:''
      };
    },
    onLoad() {
      // const con = new Vconsole();
      this.appointmentCode = getQueryString("appointmentCode");
      this.desmobile = getQueryString("desmobile") || getQueryString("mobile");
      this.handleSubmit = throttle(this.handleSubmit,2000)
      this._getInfo();
      this.timer = setInterval(_=>{
        if(getApp().globalData.ip){
          point({
            action_code:"910000007",//对照表填 必须传
            action_type:"enter",//对照表填 必须传
            source_url: "910000000", //对照表填 必须传
            present_url: "910000000",//对照表填 必须传
            params: [{
              k: "active_id",  //必须传
              v: "tmhd",
            },
            {
              k: "user_phone", //必须传
              v: this.desmobile,
            },
            {
              k: "user_ip",  // 必须传
              v: getApp().globalData.ip,
            },
            {
              k: "appointment_code",  // 必须传
              v: this.appointmentCode,
            }],
          })
          clearInterval(this.timer)
        }
      },1000)
    },
    methods:{
      handleToFilm(){
        uni.navigateTo({
          url:'/pages/index/index'
        })
      },
      handleOpen(){  //  打开核销确定弹窗
        if(!this.info.writeOffStatus){
          this.$refs.verify.open()
        }
      },
      async handleSubmit(){ ///  点击马上核销
        const data = {
          "desmobile": this.desmobile,
          "id": this.info.id,
          "mobile": this.info.mobile,
          "appointmentCode": this.info.appointmentCode,
          "writeOffStatus": 1
        }
        uni.showLoading({
          title:'加载中'
        })
        const res = await this.$post('/screen/appointment/writeOff',data,'','1')
        if(res.code == 200){
          uni.showToast({
            title:'提交成功',
            icon:'success'
          })
          this.$refs.verify.close()
          setTimeout(_=>{
            this._getInfo()
          },1000)
        }
        point({
          action_code:"910000008",//对照表填 必须传
          action_type:"click",//对照表填 必须传
          source_url: "910000000", //对照表填 必须传
          present_url: "910000000",//对照表填 必须传
          params: [{
            k: "active_id",  //必须传
            v: "tmhd",
          },
          {
            k: "user_phone", //必须传
            v: this.desmobile,
          },
          {
            k: "user_ip",  // 必须传
            v: getApp().globalData.ip,
          },
          {
            k: "appointment_code",  // 必须传
            v: this.appointmentCode,
          }],
        })
      },
      ////        network 
      async _getInfo(){  ///   获取预约信息
        const res = await this.$get(`/screen/appointment/writeOff/detail?desmobile=${this.desmobile}&appointmentCode=${this.appointmentCode}`)
        if(res.code == 200){
          this.info = res.data
        }else if(res.code == 1007){
          this.$refs.warring.open()
        }else{
          uni.showToast({
            title:res.msg,
            icon:'none'
          })
        }
      }
    }
  }
</script>

<style lang="less">
.verify{
  padding: 22rpx 32rpx;
  .verify-header{
    border-radius: 20rpx;
    background: #fff;
    padding: 27rpx 32rpx;
    margin-bottom: 24rpx;
    .header-code{
      display: flex;
      justify-content: space-between;
      align-items: center;
      .code-title{
        font-size: 30rpx;
        color: #333;
        padding-left: 20rpx;
        position: relative;
        line-height: 1;
        &::before{
          display: block;
          content: '';
          background: #e50125;
          width: 10rpx;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
        }
      }
      .code-status{
        width: 90rpx;
        text-align: center;
        line-height: 30rpx;
        font-size: 24rpx;
        border-radius: 50rpx;
        border: .5px solid #e60027;
        color: #e60027;
        &.code-use{
          color: #ccc;
          border-color: #ccc;
        }
      }
    }
    h2{
      font-size: 72rpx;
      margin: 48rpx 0 20rpx;
      padding-bottom: 40rpx;
      line-height: 1;
      border-bottom: .5px solid #ccc;
    }
    .com-list{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      line-height: 42rpx;
      font-size: 28rpx;
      margin-bottom: 42rpx;
      strong{
        color: #f00;
        font-weight: 400;
        span{
          background: #e60027;
          color: #fff;
          margin-left: 20rpx;
          padding: 4rpx 12rpx;
          font-size: 24rpx;
          border-radius: 50rpx;
        }
      }
    }
  } // .verify-header end 
  
  
  .verify-button{
    background: #e60027;
    color: #fff;
    font-size: 36rpx;
    width: 100%;
    line-height: 100rpx;
    margin-top: 60rpx;
    border-radius: 50rpx;
    &.disabled{
      background: #ccc;
    }
  } //  .verify-button end
  
  .verify-popup{
    text-align: right;
    width: 80vw;
    .popup-close{
      width: 60rpx;
    }
    .verify-main{
      text-align: left;
      padding: 40rpx 20rpx;
      background: #fff;
      border-radius: 30rpx;
      span{
        border-radius: 50rpx;
        padding: 8rpx 40rpx;
        color: #e60027;
        border: .5px solid #e60027;
      }
      h2,h1{
        text-align: center;
        margin: 40rpx 0;
      }
      h2{
        font-weight: 400;
        font-size: 36rpx;
      }
      .main-button{
        background: #e60027;
        color: #fff;
        font-size: 36rpx;
        width: 80%;
        line-height: 90rpx;
        margin: 0 auto;
        margin-top: 56rpx;
        border-radius: 50rpx;
      }
    }
  }  ///   .verify-popup end
  
}
</style>
